<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Remote datasource</title>
    <link rel="stylesheet" href="css/jquery-ui.css" />
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery-ui-1.9.1.custom.min.js"></script>
	
    <style>
    .ui-autocomplete-loading {
        background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
    }
    </style>
    <script language="javascript" type="text/javascript">
    var z = ["one","two","three","four"];
    
    var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
            
    $(function() {
        function log( message ) {
            $( "<div>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }
 
        $( "#birds" ).autocomplete({
            source: z,
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );
            }
        });
    });
    
        $(function() {
        $( "#tags" ).autocomplete({
            source: z
        });
    });
    </script>
</head>
<body>
 source: "un.csp?ko=99",
 <table>
 <tr><td valign="top">
	<div class="ui-widget">
	    <label for="birds">Birds: </label>
	    <input id="birds" />
	</div>
	 
	<div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
	    Result:
	    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	</div>
 <td valign="top">
	<div class="ui-widget">
    	<label for="tags">Tags: </label>
    	<input id="tags" />
	</div> 	
 </table>
 
</body>
</html>